<template>
  <div class="box_max_cover" :style="{ backgroundImage: `url(${img.bgi})` }">

    <!-- <div class="big_title">
      <span></span> 喷喷涂涂会员卡
      <span></span>
    </div> -->
    <!-- <div class="member_right"> -->
    <!-- 权益展示 -->
    <!-- <div class="member_right_top">尊享六大权益</div> -->
    <!-- <div class="member_right_bot">
        <div>
          <div @click="jumpRou">
            <van-icon name="ttyouhui" size="25" color="#E5AA29" />
            <span>产品特惠</span>
          </div>
          <div>
            <van-icon name="ttxinxi" size="25" color="#E5AA29" />
            <span>涂装信息使用</span>
          </div>
          <div>
            <van-icon name="ttkefu" size="25" color="#E5AA29" />
            <span>专属客服</span>
          </div>
        </div>
        <div>
          <div>
            <van-icon name="tttequan" size="25" color="#E5AA29" />
            <span>金牌特权</span>
          </div>
          <div>
            <van-icon name="ttgongneng" size="25" color="#E5AA29" />
            <span>客户开发功能</span>
          </div>
          <div>
            <van-icon name="ttchengnuohan" size="26" color="#E5AA29" />
            <span>无风险承诺</span>
          </div>
        </div>
      </div> -->
    <!-- <slot v-for="(item,i) in memberCardList">
        <div class="server_type" @click="chooseChange(item.id)">
          <div class="server_type_tit">服务类型</div>
          <div class="server_type_price">
            <span>{{item.name}}</span>
            <span>{{item.retailPrice}}</span>
            <span class="font_clo">限时优惠，买一赠一</span>
          </div>
        </div>
      </slot> -->

    <!-- </div> -->
    <!-- linear-gradient(to right, #EABC0A, #EA5839) -->
    <van-goods-action>
      <div  role="button" tabindex="0" class="van-goods-action-icon">
        <van-icon name="cart-o" size="18"></van-icon>
      </div>
      <div  role="button" tabindex="0" class="van-goods-action-icon">
        <van-icon name="star-o" :color="true ? '#f7b444':''" size="18"></van-icon>
      </div>
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" @click="$router.push(`/items/detail/${activeMemberCardId}`)" text="立即购买" />
    </van-goods-action>
  </div>
</template>
<script>
  import {
    getMemberCards,
    getMemberCardDetailById,
    goodsDetail,
    adList
  } from '@/api/api';
  import bgi from '@/assets/images/member_card_bgi.jpg';
  import {
    Row,
    Col,
    Cell,
    CellGroup,
    RadioGroup,
    Radio,
    cartGoodsCount,
    collectAddOrDelete,
    Sku,
    Swipe,
    SwipeItem,
    GoodsAction,
    GoodsActionButton,
    GoodsActionIcon,
    Popup,
    Toast,
    Divider,
    Dialog,
  } from 'vant';
  export default {
    data() {
      return {
        payWay: 1,
        flag: true,
        memberCardList: [],
        //默认选择的会员卡
        activeMemberCardId: -1,
        img: {
          bgi: bgi
        }
      };
    },
    created() {
      this.init()
      this.getMemberCardsImp()
    },
    methods: {
      init() {
        //获取渲染图片
        adList({
            position: 99,
          })
          .then((res) => {
            let list = res.data.data.list || []
            list.forEach(item => {
              if (item.id == 1385) {
                if (item.url) {
                  this.img.bgi = item.url
                }
              }
            });
          })
          .catch((err) => {});
      },
      pay() {
        console.log(111);
      },
      jumpRou() {
        this.$router.push({
          name: 'members-zone',
        });
      },
      // chooseChange(id) {
      //   this.styleFlag = !this.styleFlag;
      //   var flag = this.styleFlag;
      //   var ele = document.querySelector('.server_type_price');
      //   var eleClo = document.querySelector('.font_clo');
      //   if (flag) {
      //     ele.classList.add('active');
      //     eleClo.classList.add('activeFontColor');
      //     this.activeMemberCardId=id;
      //   } else {
      //     ele.classList.remove('active');
      //     eleClo.classList.remove('activeFontColor');
      //     this.activeMemberCardId=-1;
      //   }
      // },

      // 获取金牌会员卡信息
      getMemberCardsImp() {
        getMemberCards().then((res) => {
          console.log(res.data.data)
          if (res.data.data && res.data.data.list) {
            this.memberCardList = res.data.data.list
            //默认激活第一张会员卡
            this.activeMemberCardId = res.data.data.list[0].id
          }
        })
      },
      showDetail() {
        if (this.activeMemberCardId > 0) {
          this.$router.push(`/items/detail/${activeMemberCardId}`)
        } else {
          this.$dialog.alert({
            message: '请点击选中会员卡图片'
          })
          return
        }
      }
    },
    components: {
      [Row.name]: Row,
      [Col.name]: Col,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [RadioGroup.name]: RadioGroup,
      [Radio.name]: Radio,
      [GoodsAction.name]: GoodsAction,
      [GoodsActionButton.name]: GoodsActionButton,
      [GoodsActionIcon.name]: GoodsActionIcon,
    },
  };

</script>
<style lang="scss" scoped>
  .active {
    border: 1px solid #ccc !important;
    background-color: #fff !important;
  }

  .activeFontColor {
    color: #000 !important;
  }

  // color: #000;

  .big_title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #483405;
    letter-spacing: 2px;
    font-weight: 700;

    span:nth-child(1) {
      position: relative;
      display: inline-block;
      margin-right: 30px;
      width: 15px;
      height: 0px;
      border-top: 3px solid #625418;

      &::after {
        content: '';
        position: absolute;
        top: -3px;
        right: -10px;
        width: 3px;
        height: 3px;
        background-color: #625418;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
      }
    }

    span:nth-child(2) {
      position: relative;
      display: inline-block;
      margin-left: 30px;
      width: 15px;
      height: 0px;
      border-top: 3px solid #625418;

      &::after {
        content: '';
        position: absolute;
        top: -3px;
        left: -10px;
        width: 3px;
        height: 3px;
        background-color: #625418;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
      }
    }
  }

  .my-button {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    border-radius: 20px !important;
    // border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    // margin: 0 8px;
  }

  .pay_way_group img {
    vertical-align: middle;
  }

  .pay_way_title {
    padding: 16px;
    font-weight: 700;
    background-color: #fff;
  }

  .box_max {
    width: 100%;
    padding: 0 10px;
    width: 100%;
    background-size: 100% 300px;
    background-image: url('https://santu-dev.oss-cn-shanghai.aliyuncs.com/2saszuwmlho5okgsxngs.jpg');

    .member_right {
      width: 100%;
      background-color: #fff;
      // margin-top: 40px;
      margin-bottom: 44px;

      // height: 100vh;
      // overflow-y: auto;
      .member_right_top {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        font-weight: 700;
        padding: 0 16px;
      }

      .member_right_bot {
        font-size: 13px;

        div {
          display: flex;

          div {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 15px 0;

            span {
              margin-top: 5px;
            }
          }
        }
      }
    }

    .server_type {
      background-color: #fff;

      .server_type_tit {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        font-weight: 700;
        padding: 0 16px;
      }

      .server_type_price {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        padding-left: 10px;
        margin-left: 15px;
        width: 150px;
        height: 90px;
        border-radius: 4px;
        border: 1px solid #dead64;
        background-color: #eddeb9;

        span:nth-child(1) {
          height: 25px;
          line-height: 25px;
          font-size: 12px;
          font-weight: 700;
        }

        span:nth-child(2) {
          height: 30px;
          line-height: 30px;
          font-size: 22px;
          letter-spacing: 2px;
          font-weight: 700;

          &::before {
            content: '￥';
            font-size: 14px;
            font-weight: normal;
          }

          &::after {
            content: '/年';
            font-size: 14px;
            font-weight: normal;
          }
        }

        span:nth-child(3) {
          font-size: 10px;
          color: #dead64;
          margin-top: 3px;
        }
      }

      .server_type_preferential {
        display: flex;
        flex-direction: column;
        padding: 0 16px;
        margin-top: 10px;

        span {
          padding-left: 80px;
          height: 40px;
          line-height: 40px;
          color: #ab7909;
        }

        span:nth-child(1) {
          position: relative;
          border-bottom: 1px solid #eee;

          &::before {
            content: '活动价';
            position: absolute;
            left: 0px;
            color: #000;
            font-size: 12px;
          }
        }

        span:nth-child(2) {
          position: relative;
          border-bottom: 1px solid #eee;

          &::before {
            content: '已享优惠';
            position: absolute;
            left: 0px;
            color: #000;
            font-size: 12px;
          }
        }

        span:nth-child(3) {
          position: relative;
          font-size: 14px;
          color: #9b6f0d;
          font-weight: 700;

          &::before {
            content: '优惠后金额';
            position: absolute;
            font-weight: normal;
            left: 0px;
            color: #000;
            font-size: 12px;
          }
        }
      }
    }
  }

  /**覆盖原来的样式 */
  .box_max_cover {
    width: 100%;
    //padding: 0 10px;
    background-size: 100% 100%;
    background-image: url('https://santu-dev.oss-cn-shanghai.aliyuncs.com/2saszuwmlho5okgsxngs.jpg');
  }

</style>
